<template>
	<view class="content">
		<view class="hearder-cont">
			<view class="hearder-left" @click="back">
				返回
			</view>
			<view class="hearder-center">
				<view class="search" @click="search">
					<image src="../../static/icon/search.png" mode=""></image>
					<input type="text" placeholder="请输入..." placeholder-style="color: #FFFFFF;" />
				</view>
			</view>
			<view class="hearder-right">
				<text>我的</text>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="login" type="dialog">
				<uni-popup-dialog type="warn" cancelText="取消" confirmText="前往登录" title="未登录" :content="noLoginWarningText" @confirm="goLogin"
					@close="closeLogin"></uni-popup-dialog>
			</uni-popup>
		</view>
		<!-- 图片 -->
		<view class="image">
			<image :src="shopData.image"></image>
		</view>
		<!-- 价格和领取优惠券 -->
		<view class="parice-title-cont">
			<view class="price-cont">
				<view class="price">
					<text>￥</text>
					<text>{{shopData.price}}</text>
				</view>
				<view class="coupon-price" v-if="coupon == true">
					<text style="margin-left: 20rpx; font-size: 20rpx;">券后</text>
					<text style="margin-left: 10rpx;">￥</text>
					<text style="font-size: 45rpx;font-weight: 700;">169</text>
				</view>
			</view>
			<view class="get-coupon-cont" v-if="coupon == true">
				<text>商城活动券满100减5</text>
				<view class="get-coupon">
					<text>领券</text>
					<image src="../../static/icon/on-left.png"></image>
				</view>
			</view>
			<view class="title">
				<text>{{shopData.title}}</text>
			</view>
			<view class="logo">
				<image src="../../static/icon/champion.png" mode=""></image>
				<text>该商品入选商城优选人气榜.第1名</text>
			</view>
			<view style="width: 100%;height: 1rpx;"></view>
		</view>
		<!-- start属性区--------------------------------------------------------------------------- -->
		<view class="sku-param">
			<!-- 选择版本，颜色 -->
			<view class="choose" @click="chooseSku">
				<!-- 占位符 -->
				<view style="height: 30px;width: 20rpx;"></view>
				<view class="choose-left">
					选择
				</view>
				<view class="choose-right">
					<text>颜色/型号</text>
					<text style="margin-left: 70%;color: #B2BABB;">></text>
					<view class="choose-image">
						<view class="sku-image" v-for="(item , index) in shopData.imgList" v-if="index<3">
							<image :src="item" v-if="shopData.imgList!=null"></image>
						</view>
						<view class="sku-image" v-if="shopData.imgList==null">
							<image :src="shopData.image"></image>
						</view>
						
					</view>
				</view>
			</view>
			<!-- 系统发货 -->
			<view class="param-item1">
				<view style="height: 30px;width: 20rpx;"></view>
				<view class="item1-left">
					发货
				</view>
				<view class="item1-right">
					该版本发货为模拟发货，系统虚拟发货
				</view>
			</view>
			<!-- 保障 -->
			<view class="param-item1">
				<view style="height: 30px;width: 20rpx;"></view>
				<view class="item1-left">
					服务保障
				</view>
				<view class="item1-right">
					7天无理由
				</view>
			</view>
			<!-- 参数 -->
			<view class="param-item1">
				<view style="height: 30px;width: 20rpx;"></view>
				<view class="item1-left">
					商品参数
				</view>
				<view class="item1-right">
					品牌，尺码...
				</view>
				<text style="margin-left: 43%;color: #B2BABB;">></text>
			</view>
			<view style="width: 100%;height: 30rpx;"></view>
			
		</view>
		
		<!-- end属性区----------------------------------------------------------------------------- -->

		<view class="shop-comment">
			评论区待开发
		</view>
		<!-- 底部导航栏 -->
		<view class="bottom">
			<uni-section title="基础用法" type="line">
				<uni-goods-nav @click="storeAndCart" @buttonClick="addCartAndBuy"/>
			</uni-section>
		</view>
		<!-- sku弹出层 -->
		<uni-popup ref="addSku" type="bottom">
			<ShopDialog v-on:close="closeDialog" v-on:addCart="addCart"></ShopDialog>
		</uni-popup>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="dialogType" :message="message" :duration="1500" style="text-align: center;"></uni-popup-message>
		</uni-popup>
	
	</view>
	

	
</template>

<script>
	import ShopDialog from './shopDialog.vue'
	import store from '../../store/index.js'
	import http from "../../util/httpRequest.js"
	export default{
		components:{
			ShopDialog
			
		},
		data(){
			return{
				decode:false,
				coupon:false,
				noLoginWarningText:"您还没有登录，请先登录",
				dialogType:"error",
				message:null
			}
		},
		computed:{
			shopData(){
				return store.state.common.shopData
			}
		},
		methods:{
			//店铺和购物车
			storeAndCart(e){
				//店铺
				if(e.index==0){
					console.log("店铺")
				}
				//购物车
				if(e.index){
					console.log("购物车")
				}
			},
			//添加购物车和购买
			addCartAndBuy(e){
				let loginStatus = store.state.common.loginInfo
				if(loginStatus==null){
					this.$refs.login.open()
				}else{
					this.$refs.addSku.open('bottom')
				}
				
			},
			//选择商品具体属性，sku
			chooseSku(){
				let loginStatus = store.state.common.loginInfo
				
				if(loginStatus==null){
					this.$refs.login.open()
				}else{
					this.$refs.addSku.open('bottom')
				}
				
			},
			//关闭弹出层
			closeDialog(){
				console.log("关闭")
				this.$refs.addSku.close()
			},
			goLogin(){
				store.commit("router","/pages/common/shop")
				uni.switchTab({
					url: "/pages/info/info",
					animationType:"pop-in"
				})
				// console.log("跳转前路由",store.state.common)
			},
			closeLogin(){
				this.$refs.login.close()
			},
			//弹出层确定添加购物车
			addCart(style,size,num){
				var that = this
				// console.log(style,size,num)
				uni.request({
					url: http.memberUrl+"member/shopcart/add",
					method:"POST",
					data:{
						spuId:that.shopData.id,
						style:style,
						size:size,
						num:num,
						skuIdList:that.shopData.skuId,
						userId:store.state.common.loginInfo.userId,
						openId:store.state.common.loginInfo.openId
					},
					success(res) {
						console.log(res)
						that.closeDialog()
						if(res.data.code==500){
							that.message = res.data.msg
							that.$refs.message.open()
						}
						if(res.data.code==0){
							that.message = "添加成功，请到购物车页面查看"
							that.dialogType = "seccess"
							that.$refs.message.open()
							
						}
					}
				})
				
			},
			search(){
				uni.reLaunch({
					url:"/pages/common/search",
					success() {
						store.commit("router","/pages/common/shop")
					}
					
				})
			},
			back(){
				uni.reLaunch({
					url:store.state.common.router,
				})
			}
			
			
			
			
		}
	}
</script>

<style scoped>
	.content{
		width: 100%;
		background-color: #E9E8E6;
	}
	/* 图片 */
	.image{
		width: 100%;
		height: 700rpx;
		/* background-color: #007AFF */
	}
	.image image{
		width: 100%;
		height: 100%;
		/* max-width: 100%;
		max-height: 100%; */
	}
	/* 价格和标题 */
	.parice-title-cont{
		margin: 15rpx auto;
		/* height: 200px; */
		width: 95%;
		border-radius: 20rpx;
		background-color: #FFFFFF;
		/* background-color: #4CD964; */
	}
	.price-cont{
		display: flex;
		width: 100%;
		height: 100rpx;
		/* background-color: #007AFF; */
	}
	.price{
		margin-left: 30rpx;
		/* width: 20%; */
		height: 100rpx;
		line-height: 100rpx;
		color: #f22127;
		/* background-color: #007AFF; */
	}
	.coupon-price{
		margin: 10rpx auto auto 20rpx;
		width: 250rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 30rpx;
		background-color:#f22127; 
	}
	.coupon-price text{
		/* margin-left: 15rpx; */
		color:#FFFFFF ;
	}
	/* 领取优惠券 */
	.get-coupon-cont{
		display: flex;
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		/* background-color: #007AFF */
	}
	.get-coupon-cont>text{
		margin: auto 0 auto 30rpx;
		width: 40%;
		height: 50rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 25rpx;
		border-radius: 10rpx;
		color: #E74C3C;
		background-color: #F6DDCC;
	}
	.get-coupon{
		margin-left: 280rpx;
		color: #E74C3C;
		
	}
	.get-coupon image{
		width: 25rpx;
		height: 25rpx;
	}
	.title{
		margin-top: 20rpx;
	}
	.title>text{
		  margin: 0 auto;
		  width: 95%;
		  display:-webkit-box;
		  /* color: ; */
		  -webkit-line-clamp:2;
		  overflow:hidden;
		  text-overflow:ellipsis;
		  -webkit-box-orient:vertical;
		  word-break:break-all;
		  text-indent:30rpx;
		  font-weight: 700;
		  font-size: 30rpx;
	}
	.logo{
		margin: 15rpx auto;
		width: 90%;
		height: 50rpx;
		line-height: 50rpx;
		font-size: 25rpx;
		color: #DC7633;
		border-radius: 20rpx;
		background-color: #FDEBD0;
	}
	.logo image{
		margin: auto 5rpx auto 20rpx;
		width: 25rpx;
		height: 30rpx;
	}
	/* 属性区 */
	.sku-param{
		margin: 15rpx auto;
		width: 95%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}
	.choose{
		display: flex;
	}
	.choose-left{
		/* margin-right: rpx; */
		color: #B2BABB;
		width: 10%;
	}
	.choose-image{
		display: flex;
		flex-wrap: wrap;
	}
	.sku-image{
		margin-top: 10rpx;
		margin-right: 10rpx;
		width: 70rpx;
		height: 90rpx;
		/* overflow: hidden; */
	}
	.sku-image>image{
		width: 70rpx;
		height: 90rpx;
		border-radius: 7px;
	}
	.choose-right{
		margin-left: 15rpx;
		width: 90%;
		/* background-color: #007AFF */
	}
	/* 系统发货 */
	.param-item1{
		display: flex;
		margin-top: 25rpx;
	}
	.item1-left{
		width: 20%;
	
		font-size: 27rpx;
		color: #B2BABB;
	}
	.item1-right{
		font-size: 27rpx;
		margin-left: 45rpx;
	}
	

	
	/* 评论区 */
	.shop-comment{
		margin: 15rpx auto;
		width: 95%;
		height: 700rpx;
		text-align: center;
		font-size: 30rpx;
		border-radius: 20rpx;
		background-color: #FFFFFF;
	}
	
	

	
	/* 底部导航栏 */
	.bottom{
		position: fixed;
		width: 100%;
		/* height: 150rpx; */
		bottom: 0;
		/* background-color: #007AFF; */
	}
	
	.hearder-cont{
		display: flex;
		width: 100%;
		height: 90rpx;
		background-color: #FFFFFF
	}
	.hearder-left{
		line-height: 90rpx;
		text-align: center;
		width: 20%;
		height: 90rpx;
		/* background-color: #F5B041 */
	}
	.hearder-center{
		width: 60%;
		height: 90rpx;
		/* background-color: #17A589 */
	}
	.hearder-right{
		width: 20%;
		height: 90rpx;
		text-align: center;
		line-height: 90rpx;
		/* background-color: #EC7063 */
	}
	.search{
		display: flex;
		margin: 7rpx auto 0 auto;
		width: 95%;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #52ACFF;
		background-image: linear-gradient(68deg, #52ACFF 25%, #34ff2c 100%);
	
	}
	.search>image{
		margin-top: 5rpx;
		margin-left: 10rpx;
		width: 70rpx;
		height: 70rpx;
	}
	.search>input{
		height: 80rpx;
		line-height: 80rpx;
		color: #FFFFFF;
	}

	
</style>
